<template>
  <div class="page_table_wrapper">
    <el-table
      ref="table"
      :data="data"
      :border="border"
      :stripe="stripe"
      :height="editHeight"
      header-cell-class-name="headername"
      cell-class-name="rowname"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @row-dblclick="handleRowDBClick"
      @sort-change="handleSortChange"
      style="width: 100%"
      element-loading-text="拼命加载数据中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column
        v-if="showSelect"
        type="selection"
        align="center"
        header-align="center"
        width="55"
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        align="center"
        header-align="center"
        label="序号"
        width="55"
      ></el-table-column>
      <slot></slot>
      <div slot="empty" v-if="data && data.length == 0 && !isOverTime">
        <img src="@/assets/imgs/empty.png" ref="img" alt="暂无数据" />
        <p>暂无数据</p>
      </div>
      <div slot="empty" v-else>
        <img
          src="@/assets/imgs/overtime.png"
          alt="服务器未响应，请检查网络是否连接"
        />
        <p>服务器未响应，请检查网络是否连接</p>
      </div>
    </el-table>
    <el-pagination
      v-if="showPagination"
      ref="pagination"
      class="pagination"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-size="pageSize"
      layout="slot, prev, pager, next, total, jumper"
      prev-text="上一页"
      next-text="下一页"
      :total="total"
    >
      <span @click="handleToHome" class="home-page">首页</span>
    </el-pagination>
  </div>
</template>

<script>
// import { setTimeout } from 'timers'
export default {
  name: 'noKeepalive',
  data() {
    return {
      tableMaxHeight: 0,
      tipText: '暂无数据'
    }
  },
  props: {
    autoHeightFlag: {
      type: Boolean,
      default: true
    },
    winH: {
      type: Number,
      default: window.innerHeight
    },
    page: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    border: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    showSelect: {
      // 是否显示勾选框
      type: Boolean,
      default: false
    },
    showIndex: {
      // 是否显示序号
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    editHeight: {
      // 调整高度
      type: Number
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 判断后端是否请求超时或者接口损坏
    isOverTime: {
      type: Boolean,
      default: false
    },
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  activated() {
    this.maxHeightUpdate()
  },
  mounted() {
    if (this.autoHeightFlag) {
      window.addEventListener('resize', this.maxHeightUpdate)
    }
    this.maxHeightUpdate()
  },
  methods: {
    handleToHome() {
      this.$refs.pagination.handleCurrentChange(1)
    },
    // 当前页码变化
    handleCurrentChange(page) {
      this.$emit('currentChange', page)
    },
    handleSizeChange(size) {
      this.$emit('sizeChange', size)
    },
    // 更新表格高度  使页面能同时看到表格和页码
    maxHeightUpdate() {
      this.$nextTick(() => {
        setTimeout(() => {
          // 如果有设置最大高度则使用 否则自己重新计算
          const editHeight = this.editHeight || 0
          const winH = this.winH

          const tableTop = this.$refs.table.$el.getBoundingClientRect().top
          this.tableMaxHeight = winH - tableTop - 102 + editHeight
          // winH - tableTop - 24 - 38 - 20 - 20 + editHeight
        }, 20)
      })
    },
    // 表格多选
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    // 某行双击时
    handleRowDBClick(row, column, event) {
      this.$emit('row-dblclick', row, column, event)
    },
    // 当表格的排序条件发生变化的时候会触发该事件
    handleSortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.maxHeightUpdate)
  },
  updated() {
    this.$refs.table && this.$refs.table.doLayout()
  }
}
</script>

<style lang="scss">
.page_table_wrapper {
  // padding: 16px 0px;
  .el-table::before {
    height: 0px;
  }
  text-align: center;
  > img {
    margin-top: 20px;
  }
  .el-table__fixed-right::before {
    background-color: #fff;
  }
  .headername {
    height: 47px;
    background: rgba(245, 247, 252, 1);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(99, 101, 105, 1);
  }
  .rowname {
    padding: 6px 0;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(42, 44, 47, 1);
  }
  .el-table__row td .cell {
    color: rgba(42, 44, 47, 1);
    font-size: 14px;
  }
}
.pagination {
  margin-top: 24px;
  text-align: right;
}
.page_table_wrapper .el-table__body tr.hover-row > td {
  background-color: #e6ecff !important;
}
</style>
